<template>
	<view class="control">
		<view class="header flex-align">
			<view class="image">
				<van-image width="130rpx" round height="130rpx" src="https://img.yzcdn.cn/vant/cat.jpeg" />
				<image mode="aspectFit" class="sex"
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/1c665dbc9d6cc53fbe94e82455db22210126ee28.png" />
			</view>
			<view>
				<view class="flex-align">
					<view class="name">张益达</view>
					<view class="tag">46</view>
				</view>
				<view class="adress">点拖体育馆-游泳教练</view>
			</view>
		</view>

		<view class="main">
			<view class="daka" v-show="activeIndex === 0">
				<view class="time-title">
					2020-03-23 星期一
				</view>
				<view>
					<view class="daka-item">
						<view class="top flex-align">
							<view class="top-1"></view>
							<view class="top-2">上班时间：08:30</view>
						</view>
						<view class="bottom">
							<view class="bottom-1">打卡时间:08:29</view>
							<view class="bottom-2 flex-align">
								<image mode="aspectFit"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/c9702e1dcc0a48716be20bbd8fa04ee2fc4a68bb.png" />
								<view>江苏南通市松川区是好怀远</view>
							</view>
						</view>
					</view>
					<view class=" no-select daka-item ">
						<view class="top flex-align">
							<view class="top-1"></view>
							<view class="top-2">下班时间：05:45</view>
						</view>
					</view>
				</view>

				<view class="daka-button flex-center">
					<view class="now-item">{{nowDate}}</view>
					<view class="btn-text">下班打卡</view>
				</view>
			</view>

			<view class="total" v-show="activeIndex === 1">
				<view class="flex-center total-1">
					<view class="flex-align" >
						<van-icon name="arrow-left" size="32rpx" @click="changeTime(0)"/>
						<view class="calendar" @click="showTime = true">
							{{date.getFullYear()}}.
							{{(date.getMonth() + 1).toString().padStart(2,'0')}}
						</view>
						<van-icon name="arrow" size="32rpx" @click="changeTime(1)"/>
					</view>
				</view>
				<view class="flex-space-between total-box">
					<view class="label">考勤统计</view>
					<view class="flex-align">
						<van-icon name="arrow-left" size="32rpx" />
						<view class="calendar">
							{{date.getFullYear()}}.
							{{(date.getMonth() + 1).toString().padStart(2,'0')}}
						</view>
						<van-icon name="arrow" size="32rpx" />
					</view>
				</view>
				<view class="flex-space-between item">
					<view class="label">平均工时</view>
					<view>12小时</view>
				</view>
				<view class="flex-space-between item">
					<view class="label">平均工时</view>
					<view class="value">2.0天</view>
				</view>
				<view class="flex-space-between item">
					<view class="label">出勤天数</view>
					<view class="value">2.0天</view>
				</view>
				<view class="flex-space-between item">
					<view class="label">迟到</view>
					<view class="red">1次，共12分钟</view>
				</view>
				<view class="flex-space-between item">
					<view class="label">早退</view>
					<view class="value">0次</view>
				</view>
				<view class="flex-space-between item">
					<view class="label">缺卡</view>
					<view class="value">0次</view>
				</view>
				<view class="flex-space-between item">
					<view class="缺勤">缺勤</view>
					<view class="red">2次</view>
				</view>
			</view>
		</view>


		<van-tabbar :border="false" :active="activeIndex" @change="onChange" active-color="rgb(47,117,250)">
			<van-tabbar-item v-for="(item,index) in menuList" :key="index">
				<template #icon>
					<image :class="[`icon${index}`]" :src="item.icon" mode="aspectFit" />
				</template>
				<template #icon-active>
					<image :class="[`icon${index}`]" :src="item.a_icon" mode="aspectFit" />
				</template>
				{{item.text}}
			</van-tabbar-item>
		</van-tabbar>
		
		<!-- 年月弹窗 -->
		<van-popup :show="showTime" round position="bottom" @close="showTime = false">
			<van-datetime-picker
			  type="year-month"
			  :value="date.getTime()"
			  @confirm="configTime"
			  @cancel="showTime = false"
			/>
		
		</van-popup>
	</view>
</template>

<script>
	import {formatDate} from "@/utils/util.js"
	export default {
		data() {
			return {
				activeIndex: 1,
				showTime:false,
				date:new Date(),
				nowDate:formatDate(new Date(),'hh:mm'),
				menuList: [{
						icon: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fe357d207efa73fb98174269695b8b7c57d178db.png",
						a_icon: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f1338fc5e2fb4eb424410aa1230518585c2e9bcc.png",
						text: "考勤"
					},
					{
						icon: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2e679c098a8843ba1aaa4d8e9221f2187001e184.png",
						a_icon: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/93adf5d2f75b3549cedf7dc63625aa82fbb4086e.png",
						text: "统计"
					}
				]
			}
		},
		methods: {
			configTime(e){
				this.date = new Date(e.detail)
				this.showTime = false
			},
			changeTime(state){
				if(state === 0){
					let year = this.date.getFullYear()
					let mouth = this.date.getMonth()
					let time = new Date(year,mouth -1)
					this.date = time
				}else{
					let year = this.date.getFullYear()
					let mouth = this.date.getMonth()
					let time = new Date(year,mouth +1)
					this.date = time
				}
			},
			onChange(event) {
				this.activeIndex = event.detail
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		height: 100vh;
		padding-bottom: 100rpx;
		display: flex;
		flex-direction: column;

		.header {
			padding: 34rpx 30rpx 56rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/aab24e878b15bcba786f8aa63dcaa1195c956c88.png");

			.image {
				position: relative;
				margin-right: 30rpx;

				.sex {
					position: absolute;
					bottom: 0;
					right: 5rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.name {
				color: rgb(255, 255, 255);
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 700;
			}

			.tag {
				margin-left: 31rpx;
				padding: 6rpx 33rpx;
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 700;
				background-color: rgb(255, 255, 255);
				border-radius: 25rpx;
			}

			.adress {
				margin-top: 18rpx;
				color: rgb(255, 255, 255);
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 700;
			}
		}

		.main {
			flex: 1;
			height: 0;
			margin-top: 40rpx;
			padding: 0px 30rpx;
			overflow: auto;

			.daka {
				position: relative;
				height: 100%;

				.time-title {
					color: rgb(0, 0, 0);
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					margin-bottom: 40rpx;
				}

				.daka-item {
					position: relative;
					margin-bottom: 30rpx;

					&:last-of-type::after {
						display: none;
					}

					&::after {
						content: '';
						display: block;
						position: absolute;
						height: 100%;
						background-color: rgb(190, 190, 190);
						width: 2rpx;
						top: 31rpx;
						left: 14rpx;
					}

					.top {
						.top-1 {
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							box-sizing: border-box;
							border: 8rpx solid rgb(47, 117, 250);
						}

						.top-2 {
							margin-left: 28rpx;
							color: rgb(47, 117, 250);
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 700;
						}
					}

					.bottom {
						margin: 29rpx 20rpx 0 30rpx;
						padding: 30rpx 30rpx 24rpx;
						width: calc(100% - 30rpx);
						background-color: rgb(243, 243, 243);
						border-radius: 10rpx;
						box-sizing: border-box;

						.bottom-1 {
							color: rgb(51, 51, 51);
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
						}

						.bottom-2 {
							margin-top: 25rpx;
							color: rgb(190, 190, 190);
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 700;

							image {
								width: 26rpx;
								height: 34rpx;
								margin-right: 21rpx;
							}
						}
					}
				}

				.no-select {

					.top-1,
					.top-2 {
						color: rgb(190, 190, 190) !important;
						font-weight: 500 !important;
						border-color: rgb(190, 190, 190) !important;
					}
				}

				.daka-button {
					width: 218rpx;
					height: 218rpx;
					left: 0;
					right: 0;
					margin: auto;
					border-radius: 50%;
					bottom: 70rpx;
					position: absolute;
					flex-direction: column;
					box-shadow: 0px 5rpx 20rpx #3278fa;
					background-image: linear-gradient(to top, #3278fa, #6198fb);

					.now-item {
						color: rgb(255, 255, 255);
						font-size: 50rpx;
						font-family: DIN;
						font-weight: 700;
					}

					.btn-text {
						margin-top: 10rpx;
						color: rgb(255, 255, 255);
						font-size: 26rpx;
						opacity: 0.45;
					}
				}
			}

			.total {
				padding-bottom: 50rpx;
				.calendar {
					margin: 0px 33rpx;
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 700;
				}

				.total-1 {
					margin-bottom: 20rpx;
				}

				.total-box {
					width: calc(100% + 60rpx);
					transform: translateX(-30rpx);
					background-color: rgb(243, 243, 243);
					padding: 27rpx 30rpx;
					color: rgb(51, 51, 51);
					font-size: 32rpx
				}
				.item{
					padding: 40rpx 0;
					font-size: 30rpx;
					font-family: PingFang SC;
					border-bottom: solid 1rpx rgb(229,229,229);
				
					.label{
						 color: rgb(136,136,136);
						 
					}
					.value{
						 color: rgb(190,190,190);
					}
					.red{
						 color: rgb(255,0,0);
					}
				}
			}
		}

		.icon0 {
			width: 38rpx;
			height: 54rpx;
		}

		.icon1 {
			width: 46rpx;
			height: 42rpx;
		}
	}
</style>
